const $ = el => document.querySelector(el),
      gets = el => [...document.querySelectorAll(el)]
$('.limit').addEventListener('change',()=>{
    let limitVal = $('.limit').value,
        offsetVal = $('.offset').value
       
    render(limitVal,offsetVal)
})
$('.offset').addEventListener('change',()=>{
    let limitVal = $('.limit').value,
        offsetVal = $('.offset').value
    render(limitVal,offsetVal)
})
function render(limitVal,offsetVal){
    const xhr = new XMLHttpRequest()
    xhr.open('get',`http://zyxcl.xyz/music/api/top/playlist?limit=${limitVal}&offset=${offsetVal}`)
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                let data = JSON.parse(xhr.responseText),
                    list = $('.box ul'),
                    re = '',
                    re1 = '',
                    num = Math.ceil(data.total/limitVal)
                list.innerHTML = data.playlists.map((item)=>{
                    return `<li>${item.name}</li>`
                }).join('')
                for(let i=0;i<num;i++){
                    re+=`<span>${i+1}</span>`
                    re1 += `<option value="${i}"  ${ i== offsetVal ? 'selected' : '' }>${i+1}</option>`
                }
                $('.page').innerHTML = re
                $('.offset').innerHTML = re1
                if(gets('.page span').length < offsetVal) offsetVal = 0
                gets('.page span')[offsetVal].classList.add('active')
                gets('.page span').forEach((span,i)=>{
                    span.addEventListener('click',()=>{
                        render($('.limit').value,i)
                    })
                })
            }
        }
    }
    xhr.send()
}
render(10,0)
$('.search span').addEventListener('click',()=>{
    let val = $('.search input').value.trim()
    if(val === '') return
    render1(val,0)
    $('.box1 ul').classList.add('show')
    
})
function render1(str,offsetVal){
    const xhr1 = new XMLHttpRequest()
    xhr1.open('get',` http://zyxcl.xyz/music/api/cloudsearch?keywords=${str}limit=100&offset=${offsetVal} `)
    xhr1.onreadystatechange = ()=>{
        if(xhr1.readyState === 4){
            if(xhr1.status === 200){
                let data = JSON.parse(xhr1.responseText),
                    ul = $('.box1 ul'),
                    num = Math.ceil(data.result.songCount/100),
                    rs = ''
                ul.innerHTML = data.result.songs.map((item)=>{
                    return ` <li>
                                <img src="${item.al.picUrl}" alt="">
                                <div>
                                    <strong>${item.name}</strong>
                                    <p>${item.al.name}</p>
                                </div>
                            </li>`
                }).join('')
                for(let i=0;i<num;i++){
                    rs += `<span>${i+1}</span>`
                }
                $('.box1 .page').innerHTML = rs
                gets('.box1 .page span')[offsetVal].classList.add('active')
                gets('.box1 .page span').forEach((span,i)=>{
                    span.addEventListener('click',()=>{
                        render1(str,i)
                    })
                })
            }
        }
    }
    xhr1.send()
}
// render1('海阔天空',30,0)
